<template>
	<view class="" style="width: 100vw;height: 100vh">
	<!-- <view style="min-height: 100vh"> -->
		<!-- <image class="bg" src="/static/login/log_bg.png" mode="scaleToFill"></image> -->
		<view class="content" :style="{'background':kbackgroundColor}" style="min-height: 100vh">
		<hx-navbar title="我要曝光" :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden" transparent="auto"></hx-navbar>
		<view class="wrapper">
			<view class="cont">
				<view class="title"><text>*</text>我的疑问</view>
				<input class="inputer" type="text" :placeholderStyle="placeholderClass" placeholder="不超过10个字"
					v-model="title" :maxlength="10">
			</view>
			<view class="cont">
				<view class="title"><text>*</text>问题描述</view>
				<textarea class="text" :placeholderStyle="placeholderClass" placeholder="什么方面的谣言？在哪里发现？不超过100个字"
					v-model="desc" :maxlength="100" />
			</view>
			<view class="cont">
				<view class="title"><text>*</text>图片证据</view>
				<view class="imgs">
					<template v-for="(item, index) in images">
						<view class="item" :key="index" @click.stop="lookImg(index)">
							<image :src="item" mode="aspectFill"></image>
							<view class="del" @click.stop="delImg(index)">立即删除</view>
						</view>
					</template>
					<image class="icon" src="/static/notice/wall_add.png" mode="scaleToFill" @click="upload" v-if="images.length == 0"></image>
					<view class="addBtn" @click="upload" v-if="images.length > 0 && images.length < 6">
						<image src="/static/notice/wall_add.png" mode="scaleToFill"></image>
					</view>
				</view>
			</view>
			<view class="attention">
				<view class="title">反馈须知</view>
				<view class="text">收到您提交的问题后，我们会尽快给出官方解答，并将结果在辟谣墙上曝光。</view>
			</view>
		</view>
		<view class="foot">
			<view class="anonymous">
				<radio :checked="is_agree" @tap="agree()" style="transform: scale(.7);" />
				<text>匿名提交</text>
			</view>
			<view class="submit" @click="submit">立即提交</view>
		</view>
	</view>
</view>
</template>

<script>
	export default {
		data() {
			return {
				placeholderClass: 'font-size: 24rpx;color: #ABA9B4;',
				title: '',
				desc: '',
				images: [],
				is_agree: false
			};
		},
		onLoad() {
			
		},
		methods: {
			agree: function() {
				this.is_agree = !this.is_agree
			},
			// 上传图片API
			uploadFiles() {
				return new Promise((resolve, reject) => {
					uni.chooseImage({
						count: 1,
						success: (filePath) => {
							const file = filePath.tempFilePaths[0];
							uni.showLoading({ mask: true });
							const uploadTask = uni.uploadFile({
								url: this.$config.apiBaseUrl+'api.html',
								filePath: file,
								fileType: 'image',
								name: 'file',
								headers: {
									'Accept': 'application/json',
									'Content-Type': 'multipart/form-data',
								},
								formData: {
									'method': 'images.upload',
									'upfile': file
								},
								success: (res) => {
									if (res) {
										resolve(JSON.parse(res.data));
									} else {
										reject(res);
									}
								},
								fail: (err) => {
									this.$common.errorToShow('上传失败');
								},
								complete() {
									uni.hideLoading();
								}
							});
						},
						fail: (err) => {}
					});
				});
			},
			// 上传图片
			upload() {
				this.uploadFiles()
					.then(res => {
						if (res.status) {
							let data = res.data;
							this.images.push(data.url);
						}
					}).catch(err => { console.log(err); });
			},
			// 删除图片
			delImg(index) {
				this.$common.modelShow('删除', '确认要删除该图片吗?', () => {
					let arr = this.images.split(',');
					arr.splice(index, 1);
				});
			},
			// 查看大图
			lookImg(index) {
				uni.previewImage({
					current: index,
					urls: this.images
				});
			},
			// 发布
			submit() {
				if (!this.title) return this.$common.errorToShow('请填写疑问');
				if (!this.desc) return this.$common.errorToShow('请填写问题描述');
				if (this.images.length == 0) return this.$common.errorToShow('请上传图片证据');
				let data = {
					question: this.title,
					content: this.desc,
					image: this.images.toString(),
					is_true: this.is_agree ? 2 : 1
				};
				this.$api.addMessage(data, res => {
					if (res.status) {
						this.$common.successToShow(res.msg, res => {
							uni.navigateBack();
						});
					} else {
						this.$common.errorToShow(res.msg);
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		width: 100%;
		padding: 20rpx 40rpx 208rpx;
		position: relative;
		z-index: 2;
		.cont {
			width: 100%;
			min-height: 223rpx;
			background-color: $bg-box;
			border-radius: 20rpx;
			padding: 22rpx 17rpx;
			margin-bottom: 20rpx;
			.title {
				font-size: 32rpx;
				color: #000;
				font-weight: bold;
				margin-bottom: 17rpx;
				text {
					color: #DC0000;
					font-weight: 400;
					margin-right: 15rpx;
				}
			}
			.inputer {
				padding: 0 20rpx;
				font-size: 24rpx;
				color: #333;
			}
			.text {
				height: 140rpx;
				padding: 0 6rpx;
				font-size: 24rpx;
				color: #333;
			}
			.imgs {
				width: 100%;
				min-height: 160rpx;
				position: relative;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				.icon {
					width: 62rpx;
					height: 62rpx;
					display: block;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
				.item {
					width: 200rpx;
					height: 200rpx;
					border-radius: 10rpx;
					overflow: hidden;
					position: relative;
					margin-right: 22rpx;
					margin-top: 20rpx;
					image {
						width: 100%;
						height: 100%;
						display: block;
					}
					.del {
						width: 100%;
						height: 45rpx;
						background-color: rgba(0, 0, 0, .64);
						text-align: center;
						line-height: 45rpx;
						font-size: 20rpx;
						color: #fff;
						position: absolute;
						left: 0;
						bottom: 0;
						z-index: 1;
					}
				}
				.addBtn {
					width: 200rpx;
					height: 200rpx;
					border-radius: 10rpx;
					border: 1rpx solid #FE0058;
					display: flex;
					align-items: center;
					justify-content: center;
					image {
						width: 80rpx;
						height: 80rpx;
						display: block;
					}
				}
				& > view:nth-child(3n) {
					margin-right: 0;
				}
				& > view:nth-child(-n+3) {
					margin-top: 0;
				}
			}
		}
		.attention {
			width: 100%;
			height: 201rpx;
			background-color: $bg-box;
			border-radius: 20rpx;
			padding: 29rpx 27rpx;
			.title {
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
				margin-bottom: 16rpx;
			}
			.text {
				font-size: 24rpx;
				color: #999;
				line-height: 36rpx;
			}
		}
	}
	.foot {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 26rpx;
		z-index: 10;
		.anonymous {
			display: flex;
			align-items: center;
			justify-content: center;
			/deep/ uni-radio .uni-radio-input {
				border-color: #FF5B6C !important;
			}
			/deep/ uni-radio:not([disabled]) .uni-radio-input:hover {
				border-color: #FF5B6C !important;
			}
			/deep/ .uni-radio-input.uni-radio-input-checked {
				border-color: #FF5B6C !important;
				background-color: #FF5B6C !important;
			}
			text {
				font-size: 28rpx;
				color: #141519;
				font-weight: 400;
			}
		}
		.submit {
			width: 640rpx;
			height: 80rpx;
			background: linear-gradient(308deg, #FE0058 0%, #FF5B6C 100%);
			border-radius: 100rpx;
			text-align: center;
			line-height: 80rpx;
			font-size: 28rpx;
			color: #fff;
			font-weight: 400;
			margin: 28rpx auto 0;
		}
	}
</style>